<template>
  <div id="DigitalModelBase">
    <div style="width: 1300px; margin-bottom: 10px">
      <span style="color: white">关键字：</span>
      <a-input style="width: 200px"></a-input>
      <a-button type="primary" style="margin-left: 10px">查询</a-button>
      <a-upload
        ref="uploadRef"
        class="upload"
        name="file"
        :data="getUploadParams"
        :before-upload="handleBeforeUpload"
        :multiple="true"
        :show-upload-list="false"
        action="/sys/resources"
      >
        <a-button type="primary" style="margin-left: 8px">导入</a-button>
      </a-upload>
      <a-button type="primary" style="margin-left: 10px">导出</a-button>
    </div>
    <a-table
      :scroll="{ y: 580 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :rowKey="(record, index) => index"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button type="primary" @click="editClick" style="margin-right: 10px"
          >修改</a-button
        >
        <a-button type="danger" @click="deleteClick(record)">删除</a-button>
      </template>
    </a-table>
    <a-modal v-model="visible" :title="title">
      <a-form-model
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="数据库类型" prop="CourseTitle">
          <a-input v-model="form.CourseTitle" />
        </a-form-model-item>
        <a-form-model-item label="创建时间" prop="CourseTitle">
          <a-date-picker style="width: 236px" />
        </a-form-model-item>
        <a-form-model-item label="数据内容" prop="CourseTitle">
          <a-input v-model="form.CourseTitle" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      form: {
        CourseTitle: "", // 课程名称
      },
      rules: {
        CourseTitle: [
          { required: true, message: "请输入课程信息", trigger: "blur" },
        ],
      },
      visible: false,
      title: null,
      selectedRowKeys: [],
      columns: [
        //主页table列的配置
        {
          title: "数据库类型",
          dataIndex: "type",
          customRender: (text, record) => {
            return record.type ? record.type : "—";
          },
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          customRender: (text, record) => {
            return record.createTime ? record.createTime : "—";
          },
        },
        {
          title: "数据描述",
          dataIndex: "url",
          customRender: (text, record) => {
            return record.url ? record.url : "—";
          },
        },
        {
          title: "操作",
          width: 180,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    deleteClick(row) {
      //点击删除
      let params = {
        ids: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios.delete("/sys/resources", { params }).then((res) => {
            that.$message.success("删除成功");
            that.getData();
          });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
    getUploadParams(file) {
      // 动态返回参数，根据文件的类型、大小等来决定要上传的参数
      return {
        name: file.name, //文件名
        desc: null, //文件描述
        type: file.type, // 文件类型
        coursePlanId: this.coursePlanId, //课程计划id
      };
    },
    handleBeforeUpload(file) {
      //文件上传的上传文件弹出框弹出之前的回调
      return true;
    },
    async getData() {
      let data = await this.$axios.get("/sys/resources/getByType", {
        //根据类型查询该类型的所有数据
        params: {
          type: "model",
        },
      });
      this.tableData = data.response;
      this.tablePagination.total = data.response.length;
    },
    editClick() {
      //编辑
      this.title = "编辑";
      this.visible = true;
    },
    addbtn() {
      //新增
      this.title = "新增";
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        console.log(this.$refs.formRef, 123);

        this.$refs.formRef.validate((valid) => {
          if (valid) {
            console.log("提交成功:", this.form);
            this.visible = false; // 关闭模态框
          } else {
            console.log("校验失败");
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#DigitalModelBase {
  background: #ffffff;
  padding: 24px 32px;
  margin: 30px 20px 0 20px;
  border-radius: 2px;
}
</style>
<style lang="scss">
#DigitalModelBase {
  height: 800px;
  background: url("~@/assets/img/tableDataBg.png") repeat 100% !important;
  background-size: cover !important;
}
</style>